!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>WhiteCat</title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/global.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" />
    <link th:href="@{/css/index.css}" rel="stylesheet" />
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <link th:href="@{/css/me.css}" rel="stylesheet" />
</head>

<body>
<div th:insert="~{front/commons/commons.html :: top}"></div>

<div class="blog-user"></div>

<div class="blog-body">
    <div class="blog-container">
        <div class="blog-main">

            <div class="home-tips shadow"></div>

            <div class="blog-main-left animated slideInLeft">
                <div class="flow-default" id="parentArticleList">
                    <div class="flow-default" id="parentArticleList">
                        <div class="article shadow animated zoomIn"  th:if="${condition}=='article'" th:each="article:${ArticleList.records}" >
                            <!--文章图片简介-->
                            <div class="article-left">
                                <img th:src="@{/common/download/topicPicture/} + ${article.titlePicture}" th:alt="网络丢失">
                            </div>
                            <!--文章类型和标题-->
                            <div class="article-right">
                                <div class="article-title">
                                    <span class="article_is_top" th:if="${article.isOrigin == 0}">原创</span>&nbsp;
                                    <span class="article_is_yc" th:if="${article.isOrigin == 1}">搬运</span>&nbsp;
                                    <a th:href="@{/article/detail/ } + ${article.id}" th:text="${article.title}"></a>
                                </div>
                                <!--展示文章简介，30个字符-->
                                <div class="article-abstract">
                                    <a th:href="@{/article/detail/} + ${article.id}" th:text="${article.content.substring(0, 30)}"></a>
                                </div>
                            </div>
                            <div class="clear"></div>
                            <div class="article-footer">
                                <span><i class="fa fa-clock-o" th:text="${article.publicTime}"></i>&nbsp;&nbsp;</span>
                                <a th:href="@{/toOtherPersonal/} + ${article.user.id}" class="article-author" th:text="${article.getUser().getUsername()}"><i class="fa fa-user"></i>&nbsp;&nbsp;</a>
                                <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a th:text="${article.tag.tagname}"></a></span>
                                <span class="article-viewinfo"><i class="fa fa-eye" th:text="${article.visitorVolume}"></i>&nbsp;</span>
                                <span class="article-viewinfo"><i class="fa fa-commenting" th:text="${article.commentCount}"></i>&nbsp;</span>
                                <span class="article-viewinfo"> <i class="fa fa-thumbs-o-up"  style="color: deeppink" th:text=" ${article.supportCount}"></i>&nbsp;</span>
                            </div>
                        </div>
                        <!--粉丝-->
                        <div class="blog-module shadow animated fadeInRight fadeInUp" th:if="${condition}=='fan'">
                            <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;我的粉丝</div>
                            <ul class="hotusers-list">
                                <li class="hotusers-list-item" th:each="user:${ArticleList.records}">
                                    <div class="hotusers-avator">
                                        <!--头像-->
                                        <a th:href="@{/user/detailToOther/article/} + ${user.id}">
                                            <img th:src="@{/common/download/avatar/}+${user.avatar}" width="45" height="45" th:if="${user.avatar!=null}">
                                            <img th:src="@{/images/avatar/defaultAvatar.jpg}" width="45" height="45" th:if="${user.avatar==null}">
                                        </a>
                                    </div>
                                    <div>
                                        <a th:href="@{/user/detailToOther/article/} + ${user.id}"><div class="hotusers-nick" th:text="${user.username}"></div></a>
                                    </div>
                                    <span class="hotusers-icons"></span>
                                </li>
                            </ul>
                        </div>
                        <!--关注-->
                        <div class="blog-module shadow animated fadeInRight fadeInUp" th:if="${condition} == 'follow'">
                            <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;我的关注</div>
                            <ul class="hotusers-list">
                                <li class="hotusers-list-item" th:each="user:${ArticleList.records}" th:if="${ArticleList!=null}">
                                    <div class="hotusers-avator">
                                        <!--头像-->
                                        <a th:href="@{/user/detailToOther/article/} + ${user.id}">
                                            <img th:src="@{/common/download/avatar/}+${user.avatar}" width="45" height="45" th:if="${user.avatar!=null}">
                                            <img th:src="@{/images/avatar/defaultAvatar.jpg}" width="45" height="45" th:if="${user.avatar==null}">
                                        </a>
                                    </div>
                                    <div>
                                        <a th:href="@{/toOtherPersonal/} + ${user.id}"><div class="hotusers-nick" th:text="${user.username}"></div></a>
                                    </div>
                                    <span class="hotusers-icons"></span>
                                </li>
                            </ul>
                        </div>
                        <!--分页-->
                        <div class="layui-flow-more " style="background: white">
                            <div class="page">
                                <div>
                                    <!--                    当前页是第一页时，不能使用上一页-->
                                    <a class="prev" th:href="@{http://localhost:8080/user/detailToOther/article/}+${ArticleList.current-1}+'/'+${user.id}" th:if="${ArticleList.current-1}>0">上一页</a>
                                    <span class="current" style="color: mediumseagreen" th:text="${ArticleList.current}"></span>
                                    <!--                    当前页是最后一页时，不能使用下一页-->
                                    <a class="next" th:href="@{http://localhost:8080/user/detailToOther/article/}+${ArticleList.current+1}+'/'+${user.id}" th:if="${ArticleList.current}!=${ArticleList.pages}">下一页</a>
                                    <a class="num" href="" th:text="共 + ${ArticleList.pages} + 页"></a>
                                    <div class="layui-inline layui-show-xs-block">
                                        <input type="text" id="pageCount" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" placeholder="页数" autocomplete="off" class="layui-input" style="width: 50px">
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <button class="layui-btn" onclick="toWhichPage()"><i class="layui-icon">&#xe615;</i></button>
                                    </div>
                                    <a class="num" th:text="共 + ${ArticleList.total} + 条"></a>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
            </div>

                <div class="blog-main-right">
                    <!--主头像 不放在主页，放在空间里-->
                    <div class="blogerinfo shadow animated fadeInRight">
                        <div class="blogerinfo-figure" >
                            <img th:src="@{/common/download/avatar/}+${user.avatar}" alt="头像" th:if="${user.avatar}!=null">
                            <img th:src="@{/images/avatar/defaultAvatar.jpg}" alt="头像" th:if="${user.avatar}==null">
                        </div>
                        <p class="blogerinfo-nickname" th:text="${user.username}"></p>
                        <div class="blogerinfo-introduce" th:utext="文章数 + ':' + ${articleCount} + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 获赞数 + ':' + ${supportCount} + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 浏览量 + ':' + ${visitorCount}"> </div>
                        <div class="blogerinfo-location">
                            <a th:href="@{http://localhost:8080/user/detailToOther/article/}+${user.id}"><i class="fa fa-location-arrow"></i>&nbsp;<span>ta的文章</span></a>
                            <a th:href="@{http://localhost:8080/user/detailToOther/fan/}+${user.id}"><i class="fa fa-location-arrow"></i>&nbsp;<span>ta的粉丝</span></a>
                            <a th:href="@{http://localhost:8080/user/detailToOther/follow/}+${user.id}"><i class="fa fa-location-arrow"></i>&nbsp;<span>ta的关注</span></a>
                        </div>
                        <hr>
                        <div class="blogerinfo-contact">
                            <a class="blogerinfo-location" th:href="@{/user/toChat/} + ${user.id}"><i class="fa fa-location-arrow"></i>&nbsp;<span>私信</span></a>
                            <a class="blogerinfo-location" th:href="@{/user/beFans/} + ${user.id}" th:if="${user.isFollow==0}"><i class="fa fa-location-arrow"></i>&nbsp;<span>关注</span></a>
                            <a class="blogerinfo-location" th:href="@{/user/cancelFan/} + ${user.id}" th:if="${user.isFollow==1}"><i class="fa fa-location-arrow"></i>&nbsp;<span>取消关注</span></a >
                        </div>
                    </div>
                </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<!--页脚-->
<div th:insert="~{front/commons/commons.html :: down}"></div>

<div class="blog-mask animated layui-hide"></div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/index.js}"></script>

<script th:inline="javascript">

</script>
</body>

</html>